<template>  
  <view class="view-contain">  
    <!-- 公共组件-每个页面必须引入 -->  
    <public-module leftIcon="arrow-left" :title="title" /> 
	 
	<view class="user-integral">
	  <text class="grid-text">您的学习积分为：{{totalPoints}}</text>
	</view>
	<!-- 修改为两行说明文字，字体变小颜色淡化 -->
	<view class="info-text">
	  <text>增加积分：首次登录、每日登录、学习打卡、模考填写</text>
	</view>
	<view class="info-text">
	  <text>消费积分：查看文章、下载附件</text>
	</view>
	
	
    <mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">  
      <view  
        class="review-item u-flex-y"  
        v-for="(item, index) in markList"  
        :key="index"  
      >  
        <!-- 调整布局样式，实现垂直对齐和水平居中 -->
        <view class="record-row">
          <view class="record-item type">{{ item.changeType }}</view> 
          <view class="record-item points">{{ item.pointsChange }}</view> 
          <view class="record-item time">{{ item.changeTime}}</view> 
        </view>  
      </view>  
    </mescroll-uni>  
  </view>  
</template>  
  
<script>  
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";  
import { userIntegralInfo, getInfo } from "@/config/api.js";  
import { mapMutations } from 'vuex';
  
export default {  
  mixins: [MescrollMixin], // 使用mixin  
  data() {  
    return {  
      title: '积分记录',  
      height: 0,  
      markList: [], // 存储所有获取到的数据  
      downOption: {  
        use: false  
      },  
      upOption: {  
        textNoMore: '一不小心被你看完啦~',  
        toTop: {  
          right: '24rpx',  
          bottom: '60rpx'  
        }  
      }  
    };  
  }, 
  computed: {
    // 从Vuex store中获取用户信息
    user() {
      return this.$store.state.user || {};
    },
    // 从Vuex store中获取用户总积分
    totalPoints() {
      return this.$store.state.user?.totalPoints || 0;
    }
  },
  onLoad() {
    const res = uni.getWindowInfo();  
    this.height = res.windowHeight - 100; // 100为组件高度
    // 页面加载时获取最新用户信息
    this.fetchUserInfo();
  },
  onShow() {  
    // 每次显示页面时刷新用户信息
    this.fetchUserInfo();
  },  
  methods: {
    ...mapMutations(['setUser']),
    // 获取用户最新信息
    async fetchUserInfo() {
      try {
        const res = await getInfo();
        if (res && res.user) {
          this.setUser(res.user);
          console.log('用户信息已更新:', res.user);
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        uni.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        });
      }
    },
    async fetchData(page = { num: 1, size: 15 }) {  
      try {  
        const res = await userIntegralInfo(`?pageNum=${page.num}&pageSize=15`);  
        console.log('积分记录数据:', res);
        if (res && res.rows) {   
          // 后台接口有返回列表的总数据量  
          this.mescroll.endBySize(res.rows.length, res.total); // 必传参数(当前页的数据个数, 总数据量)  
          // 如果是第一页需手动清空列表  
          if (page.num === 1) {  
            this.markList = [];  
          }  
          this.markList = [...this.markList, ...res.rows]; // 追加原始数据到markList  
        } else {
          // 没有数据也要结束加载状态
          this.mescroll.endBySize(0, 0);
        }
      } catch (error) {  
        console.error('获取积分记录失败:', error);
        // 联网失败, 结束加载  
        this.mescroll.endErr();
        uni.showToast({
          title: '加载积分记录失败',
          icon: 'none'
        });
      }  
    },  
    upCallback(page) {  
      this.fetchData(page); // 上拉加载时调用fetchData方法，传入当前页码和每页数量  
    }
  }  
};  
</script>  
  
<style lang="scss" scoped>  
.view-contain {  
  position: relative;  
  
  .review-item {  
    width: calc(100vw - 48rpx);   
    padding: 24rpx;  
    border-radius: 32rpx;  
  }  
    
  // 记录行容器 - 实现水平居中
  .record-row {
    display: flex;
    justify-content: center; // 水平居中
    align-items: center;     // 垂直对齐
    width: 100%;
    gap: 40rpx; // 使用rpx单位适配不同屏幕
  }
  
  // 每个记录项的通用样式
  .record-item {
    display: flex;
    align-items: center; // 确保内容在项目内垂直居中
    justify-content: center; // 内容在项目内水平居中
    height: 100%; // 占满父容器高度
  }
  
  // 类型列
  .type {
    flex: 1; // 分配空间
    min-width: 120rpx;
  }
  
  // 积分列
  .points {
    flex: 1;
    min-width: 100rpx;
    font-size: 30rpx;  
    font-weight: bold;  
  }
  
  // 时间列
  .time {
    flex: 1;
    min-width: 180rpx;
    text-align: center;
  }
      
  .sj {  
    font-size: 28rpx;  
    font-weight: normal;  
    color: #333;  
  }  
  
  .btn-detail {  
    border-radius: 12rpx;  
    font-size: 28rpx;  
    padding: 0 12rpx;  
    color: #409EFF;  
    border: 1rpx solid #409EFF;  
  }  
  
  .flex-shrink-0 {  
    flex-shrink: 0;  
  } 
  
  .user-integral {
    display: flex; /* 启用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-top: 20px; /* 上间距 */
    margin-bottom: 10px; /* 下间距减小 */
    text-align: center; /* 文本居中 */
  }
  
  .grid-text {
    font-size: 18px; /* 文字加大 */
    font-weight: bold; /* 文字加粗 */
  }
  
  // 新增的说明文字样式
  .info-text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px; /* 小间距 */
    text-align: center;
    font-size: 14px; /* 字体变小 */
    color: #666; /* 颜色淡化 */
  }
}  
</style>
